<script setup lang="ts">
import axios from '../axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, reactive, ref, watch } from 'vue';
import { router } from '../router';
import { Application, ApplicationInfo, statusToString, Status } from '../model';
import StatusTag from '../components/StatusTag.vue';

const PAGE_COUNT = 10;
const pageCount = ref(0)
const currentPage = ref(1)

const tableData = ref<ApplicationInfo[]>([])

const loadData = async (page: number = 1) => {
    // 请求数据
    const res = await axios.get('/applicant/application')
    if (!res.data['ok']) {
        ElMessage({
            type: 'error',
            message: '获取申请数据失败',
        })
        return
    }

    // 计算分页显示的数据
    const allApplications: Application[] = res.data['applications']
    let allAppsInfo: ApplicationInfo[] = await Promise.all(allApplications.map(app => new Promise<ApplicationInfo>(async (resolve, reject) => {
            const res = await axios.get(`/applicationInfo?applicationId=${app.id}`)
            if (!res.data['ok']) {
                ElMessage({
                    type: 'error',
                    message: '获取申请详细数据失败',
                })
                reject()
                return
            }
            resolve(res.data)
        })
    ))
    if (filterValues.name !== undefined && filterValues.name !== '') {
        allAppsInfo = allAppsInfo.filter(app => app.template.tableName.includes(filterValues.name!))
    }
    if (filterValues.status !== undefined && <string> filterValues.status !== '') {
        allAppsInfo = allAppsInfo.filter(app => app.status == filterValues.status)
    }
    if (filterValues.showConfirmed != null) {
        allAppsInfo = allAppsInfo.filter(app => app.status == 'PENDING' || app.application.confirmed == filterValues.showConfirmed)
    }

    allAppsInfo = allAppsInfo.slice((page - 1) * PAGE_COUNT, page * PAGE_COUNT)

    allAppsInfo = allAppsInfo.reverse()

    tableData.value = allAppsInfo

    // 刷新分页数
    pageCount.value = Math.ceil(allApplications.length / PAGE_COUNT)

}



loadData()

type FilterValues = {
    name?: string,
    status?: Status,
    showConfirmed: boolean | null,
}
const drawerOpen = ref(false)

const filterValues = reactive<FilterValues>({showConfirmed: false})
const filterForm = reactive<FilterValues>({showConfirmed: false})

const submitFilter = () => {
    drawerOpen.value = false
    filterValues.name = filterForm.name
    filterValues.status = filterForm.status
    filterValues.showConfirmed = filterForm.showConfirmed
    loadData()
}

const cancelFilter = () => {
    drawerOpen.value = false
    filterForm.name = filterValues.name
    filterForm.status = filterValues.status
    filterForm.showConfirmed = filterValues.showConfirmed
}


</script>

<template>
    <div class="application-page">
        <el-table
            :data="tableData"
        >
            <el-table-column label="申请名称" prop="template.tableName" />
            <el-table-column label="发起时间" prop="application.creationTime" />
            <el-table-column label="状态" width="80px">
                <template #default="scope">
                    <StatusTag :status="scope.row.status" />
                </template>
            </el-table-column>
            <el-table-column align="right">
                <template #header>
                    <v-btn @click="drawerOpen = true">过滤    </v-btn>
                    <v-btn  @click="router.push('/application/new')">    新申请</v-btn>
                </template>
                <template #default="scope">
                    <v-btn @click="router.push(`/application/info/${scope.row.application.id}`)">详细</v-btn>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :page-count="pageCount"
            @current-change="loadData"
            />
        <el-dialog
            v-model="drawerOpen"
        >
            <div class="filter-drawer">
                <el-form :model="filterForm" class="filter-form" >
                    <el-form-item label="名称">
                        <el-input v-model="filterForm.name" placeholder="输入申请名称" clearable />
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="filterForm.status" placeholder="选择审批状态" clearable >
                            <el-option v-for="s in Status" :key="s" :value="s" :label="statusToString(s)">
                                <StatusTag :status="s" />
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="已确认">
                        <el-radio-group
                            v-model="filterForm.showConfirmed"
                            size="large"
                        >
                            <el-radio-button :label="null">全部</el-radio-button>
                            <el-radio-button :label="true">显示</el-radio-button>
                            <el-radio-button :label="false">隐藏</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <div class="filter-form-button">
                            <el-button @click="cancelFilter">取消</el-button>
                            <el-button  @click="submitFilter">确定</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<style scoped>
.application-page {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 20px;
    height: 100%;
}
.el-table {
    height: calc(100% - 100px);
    overflow: auto;
}
.el-pagination {
    height: 100px;
    margin-bottom: 20px;
}

.filter-drawer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 500px;
  padding: 20px;
}

.filter-form-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
</style>